import { connect, Link } from 'umi';
import { useState, useEffect } from 'react';
import { Table, Tag, Space } from 'antd';

function ListPage({ employeeList, dispatch }) {
  const { Column, ColumnGroup } = Table;
  useEffect(() => {
    dispatch({
      type: 'employeeList/getAll',
    });
  }, []);

  console.log(employeeList);
  function deleteList(key) {
    dispatch({
      type: 'employeeList/delList',
      key: key,
    });
  }

  return (
    <div>
      <Table dataSource={employeeList}>
        <ColumnGroup title="Name">
          <Column title="First Name" dataIndex="firstName" key="firstName" />
          <Column title="Last Name" dataIndex="lastName" key="lastName" />
        </ColumnGroup>
        <Column title="Age" dataIndex="age" key="age" />
        <Column title="Address" dataIndex="address" key="address" />
        <Column
          title="Tags"
          dataIndex="tags"
          key="tags"
          render={(tags) => (
            <>
              {tags.map((tag) => (
                <Tag color="blue" key={tag}>
                  {tag}
                </Tag>
              ))}
            </>
          )}
        />
        <Column
          title="Action"
          key="action"
          render={(text, record) => (
            <Space size="middle">
              <Link to={'/employee/' + text.key}>Edit {record.lastName}</Link>
              <a onClick={() => deleteList(text.key)}>Delete</a>
            </Space>
          )}
        />
      </Table>
    </div>
  );
}
export default connect(({ employeeList }) => ({ employeeList }))(ListPage);
